<template>
  <div class="line-monitoring">
    <aside class="aside">
      <div class="search-wrap" @click="openDia">
        <img class="img" src="./images/search.png" alt="" />
        <span>搜索</span>
      </div>
      <el-tree
        node-key="id"
        indent="20"
        :data="data"
        :props="defaultProps"
        @node-click="handleNodeClick"
      />
    </aside>
    <main class="main">
      <div class="table-wrap">
        <el-table
          max-height="600"
          :data="tableData"
          border
          @selection-change="handleSelectionChange"
        >
          <!-- <el-table-column type="selection" /> -->
          <el-table-column align="center" property="name" label="检测点名称" />
          <el-table-column align="center" property="name" label="A相温度(℃)" />
          <el-table-column align="center" property="name" label="B相温度(℃)" />
          <el-table-column align="center" property="name" label="C相温度(℃)" />

          <el-table-column align="center" property="name" label="温度报警状态">
            <template v-slot="{ row }">
              <div>
                <img src="./images/red-alarm.png" alt="" />
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            property="name"
            label="数据最新更新时间"
          />
          <el-table-column align="center" property="name" label="历史数据">
            <template v-slot="{ row }">
              <div>
                <button>查询</button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div style="padding-top: 20px">
          <Pagination
            @getDataList="getDataList"
            :pageSize="pageSize"
            :total="total"
            :currentPage="currentPage"
          />
        </div>
      </div>
    </main>
    <SearchDia v-model:visible="dialogVisible" @serachDigSure="serachDigSure" />
  </div>
</template>
<script setup lang="ts">
import { Upload } from "@element-plus/icons-vue";
import SearchDia from "./component/DiaSearch";
import { ref, reactive } from "vue";
import TitleName from "../../components/TitleName";
import Echarts from "./component/Echarts";
let search = ref("");
let pageSize = ref("10");
let total = ref(111);
let currentPage = ref(1);
let dialogVisible = ref(false);
let tableData = reactive([
  { name: "sf" },
  { name: "sf" },
  { name: "sf" },
  { name: "sf" },
  { name: "sf" },
  { name: "sf" },
  { name: "sf" },
  { name: "sf" },
  { name: "sf" },
  { name: "sf" },
]);
let value1 = ref("");
let formData = reactive({});
const defaultProps = {
  children: "children",
  label: "label",
};
const handleSelectionChange = () => {};
const getDataList = () => {};
const serachDigSure = () => {
  console.log("弹框确认");
};
const data = [
  {
    label: "Level one 1",
    children: [
      {
        label: "Level two 1-1",
        children: [
          {
            label: "Level three 1-1-1",
          },
        ],
      },
    ],
  },
  {
    label: "Level one 2",
    children: [
      {
        label: "Level two 2-1",
        children: [
          {
            label: "Level three 2-1-1",
          },
        ],
      },
      {
        label: "Level two 2-2",
        children: [
          {
            label: "Level three 2-2-1",
          },
        ],
      },
    ],
  },
  {
    label: "Level one 3",
    children: [
      {
        label: "Level two 3-1",
        children: [
          {
            label: "Level three 3-1-1",
          },
        ],
      },
      {
        label: "Level two 3-2",
        children: [
          {
            label: "Level three 3-2-1",
          },
        ],
      },
    ],
  },
];
const handleNodeClick = (data) => {
  console.log(data);
};

const andleSelectionChange = () => {};
const openDia = () => {
  dialogVisible.value = true;
};
</script>
<style lang="scss" scoped>
.line-monitoring {
  padding: 14px 17px 19px 13px;
  display: flex;
  .aside {
    height: calc(100vh - 19px - 130px);
    width: 272px;
    margin-right: 10px;
    background-color: #fff;
    padding: 31px 0 24px 17px;
    .search-wrap {
      display: flex;
      align-items: center;
      background: #ffffff;
      border: 1px solid #176ff9;
      border-radius: 5px;
      height: 42px;
      width: 239px;
      padding-left: 28px;
      margin-bottom: 24px;
      cursor: pointer;

      span {
        font-weight: 400;
        color: #176ff9;
        font-size: 19px;
        padding-left: 11px;
      }
      .img {
        width: 19px;
        height: 19px;
      }
    }
  }
  .main {
    background: #ffffff;
    height: calc(100vh - 19px - 130px);
    width: calc(100vw - 295px - 161px);
    /* background-color: #fff; */
    padding: 30px 18px 0 16px;
    :deep(.el-table__body td.el-table__cell) {
      height: 6.53vh;
    }
    .table-wrap {
      button {
        width: 80px;
        height: 33px;
        background: #487ef4;
        border-radius: 5px;
        font-size: 19px;
        font-weight: 400;
        color: #ffffff;
      }
    }
  }
}
</style>
